<template>
  <div class="home">
    <div class="header_content">
      <img v-if="!showbg" class="headerbg" src="@/assets/images/menu/top_banner.png" />
      <img v-else class="headerbg1" src="@/assets/images/homebg.jpg" />
      <div class="headerbox">
        <div class="header_tt">
          <div class="header_img">
            <img class="header_img_logo" src="@/assets/images/menu/logo.jpg" @click="navto" />
          </div>
          <div class="header_name">{{ userInfo ? userInfo.kdusername : '' }}</div>
        </div>

        <div class="header_fixcenter" @click="handleSelect()">
          <div class="header_fixcenter_val">{{ fixCenterName ? fixCenterName : '请选择' }}</div>
          <img class="header_fixcenter_icon" src="@/assets/images/menu/icon_qh.png" />
        </div>
      </div>
    </div>
    <van-dialog v-model="showNotSeatUser" confirm-button-text="知道了" confirm-button-color="#27a4e9">
      <div class="notSeatUserdialogClass">
        <div>当前用户为非座席人员</div>
      </div>
    </van-dialog>

    <!-- 下拉选择弹窗 -->
    <van-popup v-model="showSelectPicker" position="bottom">
      <van-field name="模糊查询" input-align="left" v-model="likeWho" label="模糊查询" placeholder="请输入模糊查询关键词" />
      <van-picker show-toolbar :columns="columns" @confirm="handleSelectConfirm" @cancel="showSelectPicker = false"
        value-key="name" />
    </van-popup>

    <div class="menu_content">
      <div class="menu_panel">
        <div class="menu_tt">任务中心</div>
        <div class="menu_list">
          <div class="menu_item" v-for="(item, index) in taskMenuList" :key="index" @click="goRouter(item)">
            <img :src="item.img" class="menu_icon" />
            <div class="menu_name">{{ item.name }}</div>
          </div>
        </div>
      </div>

      <div class="menu_panel">
        <div class="menu_tt">外服登记</div>
        <div class="menu_list">
          <div class="menu_item" v-for="(item, index) in registerMenuList" :key="index" @click="goRouter(item)">
            <img :src="item.img" class="menu_icon" />
            <div class="menu_name">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <div class="menu_panel">
        <div class="menu_tt">售后工具</div>
        <div class="menu_list">
          <div class="menu_item" v-for="(item, index) in toolMenuList" :key="index" @click="goRouter(item)">
            <img :src="item.img" class="menu_icon" />
            <div class="menu_name">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <div class="menu_panel">
        <div class="menu_tt">运营工具</div>
        <div class="menu_list">
          <div class="menu_item" v-for="(item, index) in KnowMenuList" :key="index" @click="goRouter(item)">
            <img :src="item.img" class="menu_icon" />
            <div class="menu_name">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import homeApi from '@/api/homeApi'
import commonApi from '@/api/commonApi'
import aiccSeatApi from '@/apiaicc/aiccSeatApi'
import { getCookies, getFieldName, isPhone } from '@/utils/util.js'
import icon_menu1 from '@/assets/images/menu/icon_menu1.png'
import icon_menu2 from '@/assets/images/menu/icon_menu2.png'
import icon_menu4 from '@/assets/images/menu/icon_menu4.png'
import icon_menu5 from '@/assets/images/menu/icon_menu5.png'
import icon_menu6 from '@/assets/images/menu/icon_menu6.png'
import icon_menu7 from '@/assets/images/menu/icon_menu7.png'
import icon_menu8 from '@/assets/images/menu/icon_menu8.png'
import icon_menu9 from '@/assets/images/menu/icon_menu9.png'
import icon_menu10 from '@/assets/images/menu/icon_menu1-pc.png'
import icon_menu11 from '@/assets/images/menu/icon_menu11.png'
import icon_menu12 from '@/assets/images/menu/icon_menu12.png'
import icon_menu13 from '@/assets/images/menu/icon_menu13.png'
import call_log from '@/assets/images/menu/call_log.png'
import { Base64 } from '@/utils/base'

export default {
    data() {
      return {
        images: [],
        lists: null,
        bannerLists: null,
        isWaterfallDisabled: false,
        loading: false,
        nodata: 1,
        pageNum: 1,
        pageSize: 6,
        value1: 1,
        menuList: [{
            icon: 'icon-dj',
            name: '外服登记',
            url: '/registerList'
          },
          {
            icon: 'icon-yy',
            name: '维修预约',
            url: '/applyRepair'
          },
          {
            icon: 'icon-case',
            name: '车辆档案',
            url: '/carOrder'
          },
          {
            icon: 'icon-gd',
            name: '维修工单',
            url: '/repairOrder'
          },
          {
            icon: 'icon-jqr',
            name: '保单机器人',
            url: '/policyRobot'
          },
          {
            icon: 'icon-sj',
            name: '数据统计',
            url: '/taskMenuNav'
          },
        ],
        timeList: [{
            name: '本周',
            code: 'week'
          },
          {
            name: '本月',
            code: 'month'
          },
          {
            name: '本年',
            code: 'year'
          },
        ],
        tabIndex: 0,
        userId: getCookies('userId'),
        fixCenterList: [],
        fixCenterName: '',
        fixCenterId: '',
        showSelectPicker: false,
        userInfo: JSON.parse(getCookies('userInfo')),
        likeWho: '',
        columns: [],
        allTaskMenuList: [
          {
            img: icon_menu2,
            name: '数据统计',
            url: '/taskMenuNav',
            type: 'all'
          },
          {
            img: call_log,
            name: '通话记录',
            url: '/callLog',
            type: 'all'
          },
        ],
        taskMenuList: [],
        registerMenuList: [
          // { img: icon_menu3, name: '外服登记', url: '/registerList' },
          {
            img: icon_menu4,
            name: '外服登记',
            url: '/registerListV2'
          },
          {
            img: icon_menu9,
            name: '外服热力图',
            url: '/registerHeat'
          },
          // { img: icon_menu4, name: '外服备用', url: '' },
        ],
        toolMenuList: [
          // {
          //   img: icon_menu5,
          //   name: '车辆档案',
          //   url: '/carOrder'
          // },
          {
            img: icon_menu5,
            name: '车辆档案',
            url: '/carOrderSearch'
          },
          {
            img: icon_menu7,
            name: '维修预约',
            url: '/applyRepair'
          },
          {
            img: icon_menu6,
            name: '保单机器人',
            url: '/policyRobot'
          },
          {
            img: icon_menu8,
            name: '维修工单',
            url: '/repairOrder'
          },
        ],
        KnowMenuList: [{
            img: icon_menu11,
            name: '会员信息',
            url: '/vipInfo'
          },
          {
            img: icon_menu13,
            name: '会员绑车记录',
            url: '/bindCarIndex'
          },
          {
            img: icon_menu12,
            name: '客户群信息',
            url: '/custGroup'
          },
          {
            img: icon_menu2,
            name: '知识库',
            url: '/knowledgeBase'
          },
        ],
        showbg: false,
        skipUrl: '',
        isAiccUser: false,
        showNotSeatUser: false,
        eventSource: ''
      }
    },

    watch: {
      fixCenterId: {
        handler: function(val, oldVal) {
          if (val) {
            localStorage.setItem('orgId', this.fixCenterId)
          }
        },
        deep: true,
        immediate: true,
      },
      likeWho: function(nval, oval) {
        if (nval) {
          let newArr = this.fixCenterList.filter((item) => {
            return item.name.indexOf(nval) > -1
          })
          this.columns = newArr
        } else {
          this.columns = this.fixCenterList
        }
      },
      skipUrl: {
        handler: function(val, oldVal) {
          if (val || oldVal) {
            this.$router.push({
              path: this.skipUrl,
            })
          }
        },
        deep: true,
        immediate: true,
      },
    },

    mounted() {
      this.getUserInfo()
      this.checkIsAiccUser()
      setTimeout(() => {
        this.loadTaskMenuList()
      },300)
      localStorage.setItem('skipUrl', '')
      if (!isPhone()) {
        this.showbg = true
      }
      let baseObj = new Base64()

      if (this.$route.query && this.$route.query.skipUrl) {
        localStorage.setItem('skipUrl', this.$route.query.skipUrl)
        if (this.$route.query.skipUrl == 'applyRepair') {
          if (this.$route.query.serverPsnName || this.$route.query.serverPsnId || this.$route.query.billStatus || this
            .$route.query.dateTime) {
            let applyParam = {
              billStatus: this.$route.query.billStatus ? baseObj.decode(this.$route.query.billStatus) : '',
              dateTime: this.$route.query.dateTime ? baseObj.decode(this.$route.query.dateTime) : '',
              serverPsnId: this.$route.query.serverPsnId ? baseObj.decode(this.$route.query.serverPsnId) : '',
              serverPsnName: this.$route.query.serverPsnName ? baseObj.decode(this.$route.query.serverPsnName) : '',
            }
            localStorage.setItem('applyParam', JSON.stringify(applyParam))
          }
        }
        if (this.$route.query.skipUrl == 'taskCenter') {
          if (this.$route.query.oneBillStatus || this.$route.query.dateTime) {
            let taskParams = {
              oneBillStatus: this.$route.query.oneBillStatus ? baseObj.decode(this.$route.query.oneBillStatus) : '',
              billStatus: this.$route.query.dateTime ? baseObj.decode(this.$route.query.dateTime) : '',
            }
            localStorage.setItem('taskParams', JSON.stringify(taskParams))
          }
        }
        if (this.$route.query.skipUrl == 'registerList') {
          if (this.$route.query.resEndTime || this.$route.query.resStartTime || this.$route.query.creator) {
            let registerParmas = {
              resEndTime: this.$route.query.resEndTime ? baseObj.decode(this.$route.query.resEndTime) : '',
              resStartTime: this.$route.query.resStartTime ? baseObj.decode(this.$route.query.resStartTime) : '',
              creator: this.$route.query.creator ? baseObj.decode(this.$route.query.creator) : '',
            }
            localStorage.setItem('registerParmas', JSON.stringify(registerParmas))
          }
        }

        if (this.$route.query.skipUrl == 'repairOrder') {
          if (this.$route.query.personOrOrgId) {
            let repairOrderParam = {
              personOrOrgId: this.$route.query.personOrOrgId ? baseObj.decode(this.$route.query.personOrOrgId) : '',
            }
            localStorage.setItem('repairOrderParam', JSON.stringify(repairOrderParam))
          }
        }
      }

    },
    activated() {
      this.getMainFixCenter()
    },

    methods: {
      checkIsAiccUser() {
        aiccSeatApi.getSeatPermission().then((res) => {
          this.isAiccUser = res.data
          localStorage.setItem('isAiccUser', this.isAiccUser)
        })
      },
      navto() {
        if (this.isAiccUser) {
          this.$router.push('/seatInformation')
        } else {
          this.showNotSeatUser = true
        }
      },
      getUserInfo() {
        homeApi.getUseInfo({}).then((res) => {
          localStorage.setItem('userId', res.kduserid)
          localStorage.setItem('userInfo', JSON.stringify(res))
          this.userInfo = res
          this.userId = res.kduserid

          this.getMainFixCenter()
        })
      },
      // 获取维修中心
      getMainFixCenter() {
        commonApi
          .getMainFixCenter({
            orgId: 'test',
            userId: this.userId,
            type: '',
          })
          .then((res) => {
            if (res.data) {
              this.fixCenterList = res.data
              if (localStorage.getItem('orgId')) {
                this.fixCenterId = localStorage.getItem('orgId')
                this.fixCenterName = getFieldName(res.data, 'billId', this.fixCenterId)
              } else {
                this.fixCenterId = res.data[0].billId
                this.fixCenterName = res.data[0].name
                localStorage.setItem('orgId', this.fixCenterId)
              }
              if (localStorage.getItem('skipUrl')) {
                this.skipUrl = localStorage.getItem('skipUrl')
              }
            }
          })
      },

      goRouter(data) {
        if (data.url) {
          this.$router.push(data.url)
        }
      },

      handleSelect() {
        this.showSelectPicker = true
        this.columns = this.fixCenterList
      },
      handleSelectConfirm(value) {
        this.fixCenterId = value.billId
        this.fixCenterName = value.name
        this.showSelectPicker = false
        this.likeWho = ''
      },
      loadTaskMenuList() {
        this.taskMenuList = []
        let menuItem
        if (this._isMobile()) {
          menuItem = {
            img: icon_menu1,
            name: '任务招揽',
            url: '/taskCenter',
            type: 'mobile'
          }
          this.taskMenuList.push(menuItem)
        } else {
          menuItem = {
            img: icon_menu10,
            name: '任务招揽',
            url: '/pcHome',
            type: 'pc'
          }
          this.taskMenuList.push(menuItem)
          this.getUserPermission(this.taskMenuList)
        }
        this.allTaskMenuList.forEach(item=>{
          this.taskMenuList.push(item)
        })
      },
      _isMobile() {
        let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
        return flag
      },
      getUserPermission(taskMenuList) {
        commonApi.getBaseCode({
          key: '招揽首页菜单'
        }).then((res) => {
          if (res.code == 1) {
            let pcTask = {}
            if (!!res.data && res.data.length > 0) {
              for (let i = 0; i < res.data.length; i++) {
                if (res.data[i].name == this.userInfo.kdpersonid) {
                  pcTask = {
                    img: icon_menu10,
                    name: '任务中心',
                    url: '/pcTaskCenter',
                    type: 'pc'
                  }
                  break
                }
              }
            } else {
              pcTask = {
                img: icon_menu10,
                name: '任务中心',
                url: '/pcTaskCenter',
                type: 'pc'
              }
            }
            taskMenuList.push(pcTask)
          }
        })
      }
    },
  }
</script>

<style lang="less" scoped="">
  //@font-face {
  //  font-family: 'Alibaba';
  //  src: url('~@/assets/fonts/alibaba2.ttf');
  //}

  body {
    //font-family: 'Alibaba';
    background: #f3f3f3;
  }

  .home {
    background: #f3f3f3;
    //font-family: 'Alibaba';
    padding-bottom: 0.2rem;
  }

  .header_content {
    .headerbg {
      width: 100%;
      height: 159px;
    }

    .headerbg1 {
      width: 100%;
      height: 159px;
    }

    .headerbox {
      display: flex;
      align-items: center;
      width: 80%;
      margin: auto;
      background: rgba(254, 254, 254, 0.9);
      border-radius: 11px;
      justify-content: space-between;
      margin-top: -35px;
      padding: 6px 10px;
      z-index: 2;
      position: relative;

      .header_tt {
        display: flex;
        align-items: center;

        .header_img {
          width: 50px;
          height: 50px;
          border-radius: 11px;
          margin-right: 6px;

          .header_img_logo {
            width: 100%;
          }
        }

        .header_name {
          font-size: 14px;
        }
      }

      .header_fixcenter {
        display: flex;
        align-items: center;

        .header_fixcenter_val {
          font-size: 14px;
          margin-right: 6px;
        }

        .header_fixcenter_icon {
          width: 16px;
        }
      }
    }
  }

  .menu_content {
    margin: 10px;

    .menu_panel {
      margin-bottom: 10px;
      background: #fff;
      padding: 13px 11px 3px 11px;
      border-radius: 10px;

      .menu_tt {
        font-size: 16px;
        color: #979797;
        margin-bottom: 12px;
      }

      .menu_list {
        display: flex;
        flex-wrap: wrap;

        .menu_item {
          width: 22%;
          margin-right: 4%;
          margin-bottom: 10px;

          &:nth-child(4n) {
            margin-right: 0;
          }

          .menu_icon {
            width: 44px;
            display: block;
            margin: auto;
            margin-bottom: 12px;
          }

          .menu_name {
            text-align: center;
            font-size: 0.28rem;
          }
        }
      }
    }
  }
  .notSeatUserdialogClass {
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    line-height: 25px;
  }
</style>
